今天終於要正式進入到React的世界了

首先在操作React之前，我們先到chrom下載插件的地方，下載一個很棒棒的插件，這個插件可以幫助我們判斷畫面是不是React

接下來，可以打開自己的facebook看看剛剛下載的插件。

可以看到插件跟我們說facebook的網頁是用React做出來的
廢話，因為React就是他們寫的
接著我們到Vscode 先修改我們的檔案language mode => javascriptreact
但是修改後只單對當前檔案的language mode做改變
新開一次檔案就要改一次language mode(有夠麻煩)，所以我建議可以先到settings.json的地方新增設定：
file associations底下的js檔都先改成javascriptreact

"files.associations": { 
        "*.js": "javascriptreact" 
}

接下來我們把整個專案清掉(只留下index.html、index.js)，實際來做一個簡單的靜態畫面，主題就因應時勢來製作一個柬埔寨宣傳畫面XD
不過我不是專業前端也沒有設計背景，平常的切板都是拿著設計師的 figma 照著切出來
所以我的美感 大致上等於0 ，不要期待會看到多炫泡的畫面XD

因為有留html 所以我們一開始的root Dom就可以直接拿來用
但在開始React修改之前，我們重新設計一下html，我希望在html中增加一些區塊

Index.html

上面是宣傳banner 下面兩個併行區塊的div(這裡使用flex排版)
index.html

    <div id="root"></div>
    <div style="width:1200px;display: flex;margin: auto;">
        <div id="left" style="width: 50%;">

        </div>
        <div id="right" style="width: 50%;">

        </div>
    </div>

Index.js

接下來改一下index.js的內容，讓他可以render元件給html
新的寫法在import reactDom 的時候是到 react-dom/client的路徑去取資料要在client.d.ts的檔案加入export的function
但這裡我有點懶，所以我用比較舊的方法
先把import 改成 import ReactDOM from 'react-dom';

然後使用 querySelector + ReactDOM.render
index.js

import React from 'react'; //這個不用動

/*react Dom 的import要修改一下*/
import ReactDOM from 'react-dom';

/*下面三個是import元件進來*/
import Title from './PageTitle';
import Left from './Left';
import Right from './Right';


/*root render不用動*/
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Title />
  </React.StrictMode>
);

/*新增兩個區塊的render*/
ReactDOM.render(
  <React.StrictMode>
    <Left />
  </React.StrictMode> , document.querySelector("#left"));

ReactDOM.render(
  <React.StrictMode>
    <Right />
  </React.StrictMode> , document.querySelector("#right"));

當然，改成這樣可以看到主控台有一些錯誤，主要是後續版本問題會不support
不同版本基本的寫法有改過，不過這裡是自己要看的，畫面上有輸出就好
到後面要寫比較正式的專案的時候我再來改成官方的建議寫法><這裡先暫時這樣。

PageTitle

接下來我們需要做一個Title的Dom 放在整個畫面的最上面
圖片的部分因為我這裡只是要做demo 且網站沒有要上線 所以就google隨便抓一張圖片 (應該是沒有版權問題ㄅ)
PageTitle.js

import React from "react"; 
const Title = () => { 
    return ( 
        <div style={{ width:"1200px",height:"500px",margin:"auto",position:"relative"}}> 
            <img src="https://uc.udn.com.tw/photo/2022/04/07/1/16544886.jpg" 
                style={{ width:"100%" , height:"100%",objectFit:"cover" }} >
            </img> 
            <div style={{  position:"absolute",top:"2rem",left:"3rem",
                        color:"#b3629e",fontSize:"3rem",fontWeight:"bolder"}}> 
                <p style={{ marginBottom:"0px",marginTop:"0px" }}>
                    加入柬埔寨
                </p> 
                <p style={{ marginBottom:"0px",marginTop:"0px" }}>
                    邁向未來，夢想起飛
                </p> 
                <p style={{ marginBottom:"0px",marginTop:"0px" }}>
                    #懂的人都懂
                </p> 
            </div> 
        </div> 
    ); 
} 
export default Title;

這裡可以看到我很懶惰的不想要寫class 所以我用inline-style
不過使用inline-stylee要注意以下幾點：

1. 需要兩個大括號，最外面的大括號表示要在JSX之中寫js，而內層的大括號是指Js 的Object
2. 因為"-"在Js 之中代表減號，因此在有包含到"-"的style都需要改成Camel-Case來撰寫，例如：textAlign

Left.js

我們接下來在剛剛的pagetitle下面設定兩個區塊，左邊我想放誘人的基本介紹，右邊放一個誘人的報名表單
左邊 我們嘗試用JSX來創建一個 宣傳array，然後遍歷它

PS.這裡踩了一個坑，我原本要用forEach的，結果畫面都沒有反應，最後發現在使用JSX的時候
最終還是要return 一個html Tag回去
因為forEach本身是沒有回傳值的，所以當我們在JSX之中要使用遍歷時，要改成map
大家應該都知道map跟each的差別，我就不浪費大家的閱讀時間了。

import React from "react"; 
const Left = () => { 
    let slogan = ["月薪3000美金，包吃包住","工作輕鬆 - 辨公室客服","每三個月一張返鄉機票","成就自我價值"]; 
    return ( 
        <ol> 
            { 
              slogan.map( value => { 
                    return <li>{value}</li>; 
              })   
            } 
        </ol> 
    ); 
} 
export default Left;

這裡我到畫面上看的時候發現有錯誤回報：
Warning: Each child in a list should have a unique "key" prop
看起來是因map的內容必須要有個不重複的key
我在這裡有點懶得改做法了，因為是很基本的靜態畫面，我們求簡單就好XD
所以我們直接加一個key給他

 slogan.map( value => { 
    return <li key={value.toString()}>{value}</li>; 
  })

明天我們繼續把右邊的區塊作完~